<%@page import="com.eportal.util.WebUtil"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>智能锁管理系统-登录页面</title>
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.qrcode.min.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/html5.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/respond.min.js"></script>
    <![endif]-->

	<style type="text/css">
		body{
			margin-top:0px;
			 margin-right:0px;
			 margin-bottom:0px;
			 margin-left:0px;
			 background-color:#CCDAF7;
			 background-repeat:no-repeat;
			 background-position:top;
			 background-attachment:fixed;
			 background-image:url("../../static/images/webLogin.png");
		}
		.login{
			/* padding-left: 54%; */
    		padding-top: 19%;
		}
 		.n {
 			background:#ecf0f2;
 			height: 280px;
    		width: 400px;
    		float: right;
 		}
 		.tip{
 			font-size: 30px;
 			text-align:center;
 			font-family: 微软雅黑;
 			color: #62d2fc;
 		} 
 		.tipName{
 			text-align:center;
 			padding-top: 10px;
 		}
 		.d{
 			text-align:center;
 			margin-top: 14px;
 			height: 40px;
    		width: 290px;
    		margin:0 auto;
    		margin-top: 14px;
    		display: block;
    		background: white;
 		}
 		.border {
			border-style: solid;
			border-color: #339933;
			border-width:1px;
		}
 		.input{
 			height: 38px;
    		width: 250px;
    		background: white;
    		font-family: 微软雅黑;
    		border: 1px solid transparent; 
 			border-radius: 4px; 
 			vertical-align: middle;
 		}
 		.input:focus {
		    outline:none;
		}
 		.form{
 			text-align:center;
 			width: 290px;
 			margin-left: 55px;
 		}
  		.submit{ 
  			height: 40px; 
     		width: 290px; 
     		font-size: 24px !important; 
     		font-family: 微软雅黑; 
     		color:white !important; 
     		background-color: #62d2fc !important; 
     		border-color: #62d2fc !important; 
 			border: 1px solid transparent; 
 			border-radius: 4px; 
  		} 
  		.zc1{
  			font-size: 18px;
 			font-family: 微软雅黑;
 			color: #62d2fc;
 			margin-right: 170px;
  		}
  		.zc2{
  			font-size: 18px;
 			font-family: 微软雅黑;
 			color: #62d2fc;
  		}
  		.di{
 			padding-top: 16px;
 			text-align:center;
 		}
 		.top{
				margin-top: 4%;
				text-align:center;		
 		}
 		.topfont{
 			font-size: 60px;
 			color: #504D4D;
 		}
 		.bottom{
 			position: absolute;
			bottom: 30px;
			margin:auto;
			left: 42%;
			text-align:center;	
 		}
 		.bottomfont{
 			display: block;
 			font-size: 24px;
 			color: #504D4D;
 		}
 		.bottomfont:hover { color:#504D4D; }
 		.label{
 			
 		}
 		.label1{
 			width: 35px;
 			height: 35px;
 			background-image:url("../../static/images/name.png");
 		}
 		.tb{
 			vertical-align: middle;
		    float: left;
		    background: white;
		    margin-top: 8px;
		    margin-left: 10px;
		    margin-right: 3px;
 		}
 		.bottom2{
 			position: absolute;
			bottom: 15px;
			margin:auto;
			right: 5%;
			text-align:center;	
 		}
 		.bottomfont2{
 			display: block;
 			font-size: 12px;
 			color: #504D4D;
 		}
 		.bottomfont2:hover { color:#504D4D; }
 		
 		.next_bind{
 			width: 120px;
 			margin: 0 auto;
 			border:1px solid #000;
 			text-align: center;
 			height: 25px;
 			line-height: 25px;
 			border-radius:8px;
 			cursor:pointer;
 		}
	</style>
</head>
<body>
<div class="top">
	<a class="topfont">智 能 锁 管 理 系 统</a>
</div>
<div class="login">

	<div class="n" style="margin-right: 100px;width: 300px;">
        <div class="tipName">
            <a class="tip">二维码登录</a>
        </div>
         <div style="width: 180px;height: 180px;margin:5px auto" id='code' ></div>
         <div style="text-align: center;">打开手机开门app管理“扫一扫”登录</div>
    </div>
    
    
     <div class="n" id="account_login" style="margin-right: 40px">
        <div class="tipName">
            <a class="tip">账号登录</a>
        </div>
            <form class="form" action="" method="post" id="loginform">
                <div class="d" id="userNameDiv"> 
					<div class="tb">
					<img src="../../static/images/name.png" width="20" height="20" /> 
					</div>
                    <input class="input" name="userName" id="userName">
                </div >
                <div class="d" id="passwdDiv">
                		<div class="tb">
						<img src="../../static/images/password.png" width="20" height="20" /> 
						</div>
                        <input class="input" type="password" name="passwd" id="passwd">
                </div>
                <div class="d">
                        <input type="submit" class="submit" value="登录"/>
                </div>
                <div class="di">
                	<a class="zc1" onclick="register()">注册</a> 
                	<a class="zc2" onclick="findPassword()">忘记密码</a>
                </div>
            </form>
    </div>
    
    <div class="n" id="old_user_bind" style="display: none;">
        <div class="tipName">
            <p style="font-size: 16px">打开手机开门app"扫一扫"绑定</p>
        </div>
        <div style="width: 180px;height: 180px;margin:5px auto" id='bind_code' ></div>
        <div style="text-align: center;font-size: 16px;font-weight: bold;">绑定后下次可扫码登录和APP登录</div>
        <div style="">
        	<div style="" class="next_bind" onclick="window.location.href = '${pageContext.request.contextPath}/admin/index.action';">
        		下次再绑定
        	</div>
        </div>
        
    </div>
    
    
</div>
<div class="bottom">
	<a class="bottomfont">掌连信息技术支持</a>
	<a class="bottomfont" style="font-size: 18px;">ZhangLianXinXiJiShuZhiChi</a>
</div>
<div class="bottom2">
	<a class="bottomfont2">浙ICP备16029736号 </a>
	<a class="bottomfont2">掌连信息版权所有 @2016</a>
</div>
<script type="text/javascript">
var k = '<%=request.getAttribute("k")%>';
    $(function () {
        $("#loginform").validate({
            rules: {
            	userName: "required",
            	passwd: "required"
            },
            messages: {
            	userName: "请输入账号",
            	passwd: "请输入密码"
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: "post",  //提交方式
                    url: "/admin/doLogin.action", //请求url
                    success: function (data) { //提交成功的回调函数
                        data = eval("(" + data + ")");
                        if (data.code == 1) {
                        	if(data.needQrcodeBind=='1'){
                        		$("#account_login").hide();
                        		$("#old_user_bind").show();
                            	$('#bind_code').qrcode({
                        			width: 180,
                        			height:180,
                        			text: data.qrcodeStr
                        		});
                        	}else{
                        		window.location.href = "${pageContext.request.contextPath}/admin/index.action";	
                        	}
                        	
                            
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                });
            }
        });
        
    	var str = "<%=WebUtil.getReqPreUrl(request)%>${pageContext.request.contextPath}u/c?k="+k;
    	$('#code').qrcode({
			width: 180,
			height:180,
			text: str
		});
    	
    	 window.setTimeout("checkLogin()",500); 
    });
    
    $("#userName").focus(
    		function(){
    			$("#userNameDiv").addClass("border");		
    		}
    	).blur(
    		function(){
    			$("#userNameDiv").removeClass("border");		
    	});
    $("#passwd").focus(
    		function(){
    			$("#passwdDiv").addClass("border");		
    		}
    	).blur(
    		function(){
    			$("#passwdDiv").removeClass("border");		
    	});
	function register(){
		window.location.href = "${pageContext.request.contextPath}/register/tComuLockRegister.action";
	}
	function findPassword(){
		window.location.href = "${pageContext.request.contextPath}/register/findPassword.action";
	}
	
	function checkLogin(){
		
		$.ajax({   
		    url:'<%=request.getContextPath()%>/admin/doLoginByQrcode.action',   
		    type:'post',   
		    data:'k='+k,   
		    async : true, //默认为true 异步   
		    dataType:'json',
		    error: function(XMLHttpRequest, textStatus, errorThrown) {
		    },  
		    success:function(result){   
		    	var data = result.data;
		       if(result.code=='1'){
		    	   window.location.href = "${pageContext.request.contextPath}/admin/index.action";
		       }else if(result.code=='-100'){
		    	   window.setTimeout("checkLogin()",500); 
		       }else if(result.code=='-200'){
		    	   layer.alert(data.msg);
		       }else{
		    	   layer.alert(data.msg);
		       }
		    }
		});
	}
</script>

<!-- 百度统计代码 -->

</body>
</html>